<template>
  <div class="search_details">
    <!-- 书本 -->
    <router-link :to="'/bookdetails?id='+item.id" class="books" v-for="item in lists" :key="item.id">
      <!-- 图片 -->
      <div class="img">
        <img v-lazy="item.cover || lists.cover" alt="" />
      </div>
      <!-- 文字 -->
      <div class="text">
        <p class="bookname">{{ item.text || lists.text }}</p>
        <p class="writer">{{ item.author || lists.author }}</p>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name:'searchres',
  data() {
    return {
      lists: [],
      text: "书名被搞丢了",
      author: "作者被搞丢了",
    };
  },
  props: ["searchBooks"],
  created() {
    console.log("传过来的搜索结果参数=====》", JSON.stringify(this.searchBooks.w));
    if (Array.isArray(this.searchBooks.w)) {
      this.lists = this.searchBooks.w;
    } else {
      this.lists.push(this.searchBooks.w);
    }
  },
};
</script>

<style lang="less">
.search_details {
  .books {
    margin-left: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 96px;
    // 最后一本书没有下边框
    .img {
      flex: 0 0 74px;
      height: 96px;
      margin-right: 3.7333%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      flex: 1;
      padding-right: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      p {
        display: flex;
        height: 50%;
        align-items: center;
        font-size: 14px;
        color: #818181;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .writer {
        font-size: 12px;
        color: #8e8e8e;
      }
    }
  }
}
</style>